<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="changeURL()">修改URL--hash</button>
<br/>
<button onclick="changePushState()">修改URL--pushState</button>
<br/>
</body>
<script>
    /**1.历史状态管理
     * 现代 Web 应用程序开发中最难的环节之一就是历史记录管理。用户每次点击都会触发页面刷新的时代早已过去，
     * “后退”和“前进”按钮对用户来说就代表“帮我切换一个状态”的历史也就随之结束了。为解决这个问题，首先出现的是
     * hashchange 事件（第 17 章介绍事件时会讨论）。HTML5 也为history 对象增加了方便的状态管理特性。
     */

    /**2.hashchange()
     * hashchange 会在页面 URL 的散列变化时被触发，开发者可以在此时执行某些操作。
     */
        //修改hash，进而改变URL散列
         let changeURL = function changeURL(){
            location.hash = "#section1";
         }
         //设置监听URL变化函数
        window.onhashchange = function(e){
            console.log('监听到URL散列值被修改了');//监听到URL散列值被修改了
            if(e){
                console.log('接收pushState跳转携带的参数'+JSON.stringify(e));
            }
        }
    /**3.pushState 状态管理修改URL
     * 状态管理API 则可以让开发者改变浏览器 URL 而不会加载新页面。为此，可以使用 history.pushState()方法。这个方法接收3个参数：
     * 一个 state 对象、一个新状态的标题和一个（可选的）相对 URL。pushState()方法执行后，状态信息就会被推到历史记录中，浏览器地
     * 址栏也会改变以反映新的相对 URL。除了这些变化之外，即使 location.href 返回的是地址栏中的内容，浏览器页不会向服务器发送请求。
     * 第二个参数并未被当前实现所使用，因此既可以传一个空字符串也可以传一个短标题。第一个参数应该包含正确初始化页面状态所必需的信息。
     * 为防止滥用，这个状态的对象大小是有限制的，通常在 500KB～1MB 以内。
     */
        let changePushState = function(){
            let stateObject = {foo:"bar"};
            history.pushState(stateObject, "My title", "baz.html");
       }
    /**4.popstate 后退监听
     * 因为 pushState()会创建新的历史记录，所以也会相应地启用“后退”按钮。此时单击“后退”按钮，
     * 就会触发 window 对象上的 popstate 事件。popstate 事件的事件对象有一个 state 属性，
     * 其中包含通过 pushState()第一个参数传入的 state 对象：
     *
     * 当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）
     * 的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条
     * 目的状态对象的副本。
     *
     * 需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，
     * 才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）
     */
    window.addEventListener("popstate", (event) => {
        console.log('popstate'+event);
        let state = event.state;
        if (state) { // 第一个页面加载时状态是 null
            console.log('popstate'+state);
        }
    });
</script>
</html>